<!--
 描述: 水球图
 作者: Jack Chen
 日期: 2020-05-03
-->

<template>
    <div class="wrap-container sn-container" style="width: 1200px;">
        <div class="sn-content">




            <div style="margin-bottom: -10px; margin-top: 20px;">
                <span
                    style="font-size: 35px; margin-top: 20%;margin-bottom: -25px;margin-left: 9%; top: 0%; color: #00c2ff;">
                    <img src="../assets/雨滴 (1).png"> 分钟雨量
                </span>
                <span
                    style="font-size: 35px; margin-top: 20px;margin-bottom: -25px;margin-left: 15%; top: 0%; color: #00c2ff;">
                    <img src="../assets/雨滴 (1).png"> 小时雨量
                </span>
                <span
                    style="font-size: 35px; margin-top: 20px;margin-bottom: -25px;margin-left: 17%; top: 0%; color: #00c2ff;">
                    <img src="../assets/雨滴 (1).png"> 天数雨量
                </span>
            </div>


            <div class="chartsdom" id="chart_polo" style="margin-top: -20px; margin-left: -30px;"></div>
        </div>
    </div>
</template>
  
<script>
import * as echarts from "echarts";
import "echarts-liquidfill";

export default {
    name: "waterPolo",
    data() {
        return {
            timer: null,
            option: null,
            data1: [0],
            data2: [0],
            data3: [0],

        }
    },
    mounted() {
        this.getEchart();

    },
    methods: {



        Set_DY_Data(water_data1, water_data2, water_data3) {

            this.data1 = [water_data1];
            this.data2 = [water_data2];
            this.data3 = [water_data3];
        },



        getEchart() {
            let myChart = echarts.init(document.getElementById('chart_polo'));

            this.option = {
                series: [{
                    type: 'liquidFill',
                    data: this.data1,
                    radius: '70%',
                    color: ['#00b9f5'],
                    backgroundStyle: {
                        color: 'rgba(0, 0, 0, 0.5)',
                        borderColor: '#007bff',
                        borderWidth: 3,
                        shadowColor: 'rgba(0, 123, 225, 0.4)',
                        shadowBlur: 20
                    },
                    outline: {
                        show: false,
                    },
                    center: ['20%', '50%'] // 调整水球图的位置
                },
                {
                    type: 'liquidFill',
                    data: this.data2,
                    radius: '70%',
                    color: ['#00b9f5'],
                    backgroundStyle: {
                        color: 'rgba(0, 0, 0, 0.5)',
                        borderColor: '#007bff',
                        borderWidth: 3,
                        shadowColor: 'rgba(0, 123, 225, 0.4)',
                        shadowBlur: 20
                    },
                    outline: {
                        show: false,
                    },
                    center: ['51%', '50%'] // 调整水球图的位置

                },
                {
                    type: 'liquidFill',
                    data: this.data3,
                    radius: '70%',
                    color: ['#00b9f5'],
                    backgroundStyle: {
                        color: 'rgba(0, 0, 0, 0.5)',
                        borderColor: '#007bff',
                        borderWidth: 3,
                        shadowColor: 'rgba(0, 123, 225, 0.4)',
                        shadowBlur: 20
                    },
                    outline: {
                        show: false,
                    },
                    center: ['82%', '50%'] // 调整水球图的位置

                }
                ]
            }

            myChart.setOption(this.option, true);

            window.addEventListener('resize', () => {
                myChart.resize();
            })




            this.timer = setInterval(() => {
                // console.log("waterPolo");



                this.option = {
                    series: [{
                        type: 'liquidFill',
                        data: this.data1,
                        radius: '70%',
                        color: ['#00b9f5'],
                        backgroundStyle: {
                            color: 'rgba(0, 0, 0, 0.5)',
                            borderColor: '#007bff',
                            borderWidth: 3,
                            shadowColor: 'rgba(0, 123, 225, 0.4)',
                            shadowBlur: 20
                        },
                        outline: {
                            show: false,
                        },
                        center: ['20%', '50%'] // 调整水球图的位置
                    },
                    {
                        type: 'liquidFill',
                        data: this.data2,
                        radius: '70%',
                        color: ['#00b9f5'],
                        backgroundStyle: {
                            color: 'rgba(0, 0, 0, 0.5)',
                            borderColor: '#007bff',
                            borderWidth: 3,
                            shadowColor: 'rgba(0, 123, 225, 0.4)',
                            shadowBlur: 20
                        },
                        outline: {
                            show: false,
                        },
                        center: ['51%', '50%'] // 调整水球图的位置

                    },
                    {
                        type: 'liquidFill',
                        data: this.data3,
                        radius: '70%',
                        color: ['#00b9f5'],
                        backgroundStyle: {
                            color: 'rgba(0, 0, 0, 0.5)',
                            borderColor: '#007bff',
                            borderWidth: 3,
                            shadowColor: 'rgba(0, 123, 225, 0.4)',
                            shadowBlur: 20
                        },
                        outline: {
                            show: false,
                        },
                        center: ['82%', '50%'] // 调整水球图的位置

                    }
                    ]
                }

                myChart.setOption(this.option, true);
                window.addEventListener('resize', () => {
                    myChart.resize();
                })
                // console.log("waterPolo1");
            }, 500);



        }
    },
    beforeDestroy() {

    }
};
</script>
  
<style lang="scss">
.sn-container {
    left: 197px;
    top: 183px;
    width: 432px;
    height: 400px;

    .chartsdom {
        width: 100%;
        height: 100%;
    }
}
</style>
  